<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<html:header title="销售订单详情">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        a{
            color: #01AAED;
            text-decoration: none;
            font-size: 12px;
        }
        a:hover {
            color: #FF5722;
        }

    </style>

    <script>
        jQuery(function () {


            $("#cancel").click(function () {
                closeSubIframe();
            });
        });

        layui.use(['form', 'table', 'laydate','element'], function () {
            let $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                element = layui.element,
                laydate = layui.laydate,
                util = layui.util;

            get("${baseUrl}sale/sale/listVoBySaleOrder.action?saleOrderId=${id}", function (res) {
                let list=[];
                $.each(res.data, function (i,saleVo) {
                    $.each(saleVo.saleGoodsVoList, function (i,d) {
                        let vo = d.goodsVo;
                        vo.goodsId = d.goodsId;
                        vo.close = saleVo.close;
                        vo.number = d.number;
                        vo.saleNo = saleVo.no;
                        vo.saleId = saleVo.id;
                        vo.price = d.price;
                        vo.unitId = d.unitId;
                        vo.amount = d.amount;
                        vo.remark = d.remark;
                        list.push(vo);
                    });

                    $.each(saleVo.salePacketVoList, function (i,d) {
                        let vo = d;
                        vo.packetId = d.packetId;
                        vo.name = d.packetName;
                        vo.no = d.packetNo;
                        vo.close = saleVo.close;
                        vo.number = d.number;
                        vo.saleNo = saleVo.no;
                        vo.saleId = saleVo.id;
                        vo.price = d.price;
                        vo.amount = d.amount;
                        vo.remark = d.remark;
                        list.push(vo);
                    });
                });
                renderTable3(list);
            });



            get("${baseUrl}sale/saleOrder/getVoById.action?id=${id}", function (res) {
                if (res.code == 1) {
                    $("#print").click(function () {
                        document.getElementById("printFrame").contentWindow.printPage(res.data);
                    });

                    if (res.data.close) {
                        showCloseImage();
                    }

                    $("#no").html(res.data.no);
                    $("#totalAmount").html(res.data.totalAmt);
                    $("#store").html(res.data.store.name);
                    $("#custom").html(res.data.custom.name);

                    $("#type").html(res.data.type == 1 ? "批发":"销售");
                    $("#user").html(res.data.user.name);
                    $("#date").html(GMTToDate(res.data.date));
                    $("#deliveryDate").html(GMTToDate(res.data.deliveryDate));
                    $("#contacts").html(res.data.contacts);
                    $("#phone").html(res.data.phone);
                    $("#address").html(res.data.address);

                    if (res.data.delivery){
                        $("#sendInfo").css("display","block");
                    }

                    if (res.data.discountRate == ""){
                        $("#discountFlag").html("折扣金额(元)：");
                        $("#discount").html(getPrice(res.data.discountAmt));
                    } else {
                        $("#discountFlag").html("折扣率(%)：");
                        $("#discount").html(res.data.discountRate);
                    }

                    $("#otherAmt").html(getPrice(res.data.otherAmt));
                    $("#remark").html(res.data.remark);

                    $("#makeUser").html(res.data.makeUser.name);
                    $("#makeTime").html(res.data.makeTime);

                    parseImageNames(res.data.image);

                    let list=[];
                    let list2=[];
                    $.each(res.data.saleOrderGoodsVoList, function (i,d) {
                        let vo = d.goodsVo;
                        vo.goodsId = d.goodsId;
                        vo.number = d.number;
                        vo.hasNumber = d.hasNumber;
                        vo.waitNumber = d.waitNumber;
                        vo.unitId = d.unitId;
                        vo.times = d.times;
                        vo.price = d.price;
                        vo.remark = d.remark;
                        vo.amount = d.amount;
                        list.push(vo);
                        if (d.waitNumber > 0) {
                            list2.push(vo);
                        }
                    });

                    $.each(res.data.saleOrderPacketVoList, function (i,d) {
                        let vo = d;
                        vo.packetId = d.packetId;
                        vo.no = d.packetNo;
                        vo.name = d.packetName;
                        vo.number = d.number;
                        vo.hasNumber = d.hasNumber;
                        vo.waitNumber = d.waitNumber;
                        vo.unitId = d.unitId;
                        vo.times = d.times;
                        vo.price = d.price;
                        vo.amount = d.amount;
                        vo.remark = d.remark;
                        list.push(vo);
                        if (d.waitNumber > 0) {
                            list2.push(vo);
                        }
                    });

                    renderTable1(list);
                    renderTable2(list2);
                }else {
                    tip("获取订单信息失败");
                }
            });
        });

        function renderTable1(list) {
            layui.table.render({
                id: 'table1',
                elem: '#table1',
                data: list,
                totalRow:true,
                text: {
                    none: '未选择商品' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', minWidth: 140, title: '名称/规格', style: "font-size:12px;", templet: '#nameBar'},
                    {field: 'no', width: 140, title: '商品编号', style: "font-size:12px;"},
                    {width: 120, title: '属性', style: "font-size:12px;", templet: function (d) {
                        return genAttr(d.attrNameVoList);
                    }},
                    {field:'number', width: 110, title: '数量'},
                    {width: 120, title: '单位', style: "font-size:12px;", templet: function (d) {
                        return d.goodsId==null ? "": genUnitName(d.goodsUnitVoList,d.unitId);
                    }},
                    {field: 'price', width: 120, title: '单价', templet: function (d) {
                        return getPrice(d.price);
                    }},
                    {field: 'amount', width: 120, title: '金额', style: "font-size:12px;", templet: "#amountBar"},
                    {field: 'remark', width: 120, title: '备注', style: "font-size:12px;"},

                ]],
                limit: Number.MAX_VALUE,
                done: function (res, curr, count) {
                    $('[lay-id="table1"] .packetName').unbind().bind('click',function () {
                        let index = $(this).parents('tr').data('index');
                        let tableData = layui.table.cache.table1;
                        showPacketList(tableData[index].name, tableData[index].packetGoodsVoList);
                    });

                    let amount=0;
                    let number = 0;
                    let hasNumber = 0;
                    $.each(layui.table.cache.table1, function (i,d) {
                        number += parseInt(d.number);
                        hasNumber += parseInt(d.hasNumber);
                        amount += parseFloat(d.amount);
                    });
                    setTotalRowWithParent($('[lay-id="table1"]'),"number",number);
                    setTotalRowWithParent($('[lay-id="table1"]'),"hasNumber",hasNumber);
                    setTotalRowWithParent($('[lay-id="table1"]'),"amount",getPrice(amount));
                    setTotalRowWithParent($('[lay-id="table1"]'),"0","合计");
                }
            });
        }


        function renderTable2(list) {
            layui.table.render({
                id: 'table2',
                elem: '#table2',
                data: list,
                totalRow:true,
                text: {
                    none: '无' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', minWidth: 140, title: '名称/规格',style:"font-size:12px;", templet: '#nameBar'},
                    {field: 'no', width: 140, title: '商品编号', style: "font-size:12px;"},
                    {width: 120, title: '属性', style: "font-size:12px;", templet: function (d) {
                            return genAttr(d.attrNameVoList);
                        }},
                    {field:'waitNumber', width: 110, title: '数量'},
                    {width: 120, title: '单位', style: "font-size:12px;", templet: function (d) {
                            return d.goodsId==null ? "": genUnitName(d.goodsUnitVoList,d.unitId);
                        }},
                    {field: 'price', width: 120, title: '单价', templet: function (d) {
                            return getPrice(d.price);
                        }},
                    {field: 'amount', width: 120, title: '金额', style: "font-size:12px;", templet: "#amountBar"},
                    {field: 'remark', width: 120, title: '备注', style: "font-size:12px;"},

                ]],
                limit: Number.MAX_VALUE,
                done: function (res, curr, count) {
                    $('[lay-id="table2"] .packetName').unbind().bind('click',function () {
                        let index = $(this).parents('tr').data('index');
                        let tableData = layui.table.cache.table1;
                        showPacketList(tableData[index].name, tableData[index].packetGoodsVoList);
                    });

                    let amount=0;
                    let number = 0;
                    $.each(res.data, function (i,d) {
                        number += parseInt(d.waitNumber);
                        amount += parseFloat(d.amount);
                    });
                    setTotalRowWithParent($('[lay-id="table2"]'),"waitNumber",number);
                    setTotalRowWithParent($('[lay-id="table2"]'),"amount",getPrice(amount));
                    setTotalRowWithParent($('[lay-id="table2"]'),"0","合计");
                }
            });
        }

        function renderTable3(list) {
            layui.table.render({
                id: 'table3',
                elem: '#table3',
                data: list,
                totalRow: true,
                text: {
                    none: '无' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                cols: [[
                    {width:70,title:"序号",templet:function (d) {
                            return genTableIndex(d.close, "作废", d);
                        }},
                    {
                        field: 'name', minWidth: 140, title: '名称/规格', style: "font-size:12px;", templet: '#nameBar' },
                    {field: 'no', width: 140, title: '商品编号', style: "font-size:12px;",templet:'#saleBar'},
                    {
                        width: 120, title: '属性', style: "font-size:12px;", templet: function (d) {
                            return genAttr(d.attrNameVoList);
                        }
                    },
                    {field: 'number', width: 110, title: '数量'},
                    {field: 'inGoodsNo', width: 140, title: '销售单号',templet:'#inGoodsBar'},
                    {
                        width: 120, title: '单位', style: "font-size:12px;", templet: function (d) {
                            return d.goodsId == null ? "" : genUnitName(d.goodsUnitVoList, d.unitId);
                        }
                    },
                    {field: 'price', width: 120, title: '单价', templet: function (d) {
                            return getPrice(d.price);
                        }},
                    {field: 'amount', width: 120, title: '金额', style: "font-size:12px;", templet: "#amountBar"},
                    {field: 'remark', width: 120, title: '备注', style: "font-size:12px;"},

                ]],
                limit: Number.MAX_VALUE,
                done: function (res, curr, count) {
                    $('[lay-id="table3"] .packetName').unbind().bind('click',function () {
                        let index = $(this).parents('tr').data('index');
                        let tableData = layui.table.cache.table1;
                        showPacketList(tableData[index].name, tableData[index].packetGoodsVoList);
                    });

                    $(".saleDetail").unbind().bind("click", function () {
                        openTab("销售单详情", "${baseUrl}sale/saleDetail.action?id="+$(this).attr("saleId"));
                    });

                    let amount=0;
                    let number = 0;
                    $.each(res.data, function (i,d) {
                        if(!d.close){
                            number += parseInt(d.number);
                            amount += parseFloat(d.amount);
                        }
                    });
                    setTotalRowWithParent($('[lay-id="table3"]'),"number",number);
                    setTotalRowWithParent($('[lay-id="table3"]'),"amount",getPrice(amount));
                    setTotalRowWithParent($('[lay-id="table3"]'),"0","合计");

                    setTableLineCss("table3",res.data, "close", true, "font-gray-c2c2c2");
                }
            });
        }
    </script>

</html:header>

<iframe id="printFrame" style="width:0px;height:0px" src="${baseUrl}print/saleOrderPrint.action" frameborder="0"></iframe>
<body>
<div class="layui-inline" style="padding-bottom: 20px;">
    <button class="layui-btn" id="print">打印</button>
    <button class="layui-btn layui-btn-primary" id="cancel">关闭</button>
</div>
<div class="layuimini-container">
    <div class="layuimini-main">
        <html:closeOrderImage/>

        <h2 class="tableBeforeTitle">销售订单</h2>
        <div style="height: 4px;background-color: #bbbbbb;width: 100%;margin: 20px 0 2px 0;"></div>
        <div style="height: 1px;width: 100%;background-color: #dddddd;margin-bottom: 10px;"></div>
        <div style="height: 10px;"></div>

        <form class="layui-form" action="" lay-filter="saleOrder">
            <input type="hidden" name="id" value="${id}">

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">编号：</span>
                    <span id="no" name="no"></span>
                </div>
            </div>


            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">门店：</span>
                    <span id="store"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">客户：</span>
                    <span id="custom"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">销售类型：</span>
                    <span id="type"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">经手人：</span>
                    <span id="user"></span>
                </div>
            </div>

            <div class="layui-inline" style="margin:0 20px 10px 0;">
                <div>
                    <span style="color: #aaaaaa">业务日期：</span>
                    <span id="date"></span>
                </div>
            </div>

            <div id="sendInfo" style="display: none;">
                <div class="layui-inline" style="margin:0 20px 10px 0;">
                    <div>
                        <span style="color: #aaaaaa">送货日期：</span>
                        <span id="deliveryDate"></span>
                    </div>
                </div>


                <div class="layui-inline" style="margin:0 20px 10px 0;">
                    <div>
                        <span style="color: #aaaaaa">客户联系人：</span>
                        <span id="contacts"></span>
                    </div>
                </div>


                <div class="layui-inline" style="margin:0 20px 10px 0;">
                    <div>
                        <span style="color: #aaaaaa">联系电话：</span>
                        <span id="phone"></span>
                    </div>
                </div>


                <div class="layui-inline" style="margin:0 20px 10px 0;">
                    <div>
                        <span style="color: #aaaaaa">送货地址：</span>
                        <span id="address"></span>
                    </div>
                </div>
            </div>

            <div style="height: 10px;"></div>

            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">全部商品</li>
                    <li>未转销售商品</li>
                    <li>已转销售商品</li>
                </ul>
                <div class="layui-tab-content" style="padding:0">
                    <div class="layui-tab-item layui-show" style="padding: 20px 0;">
                        <table class="layui-hide" id="table1" lay-filter="table1" lay-size="sm"></table>
                        <table class="layui-table" style="margin: -10px 0 0 0;">
                            <tbody>
                            <tr>
                                <td>
                                    <div style="float: right;">
                                        <span style="color: #aaaaaa;" id="discountFlag"></span><span id="discount"></span>
                                        <span style="color: #aaaaaa;padding-left: 20px;">其他费用：</span><span id="otherAmt"></span>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div style="text-align: right;font-size:16px;font-weight:bold;height: 38px;line-height: 38px;padding-right: 60px;">
                                        总计金额:<span id="totalAmount" discountFlag="1" style="color: #FF5722">0</span>元
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <div style="position: relative;">
                                        <span style="color: #aaaaaa;padding-left: 20px;">备注：</span><span id="remark"></span>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-tab-item" style="padding: 20px 0;">
                        <table class="layui-hide" id="table2" lay-filter="table2" lay-size="sm"></table>
                    </div>
                    <div class="layui-tab-item" style="padding: 20px 0;">
                        <table class="layui-hide" id="table3" lay-filter="table3" lay-size="sm"></table>
                    </div>
                </div>
            </div>


            <div class="layui-form-item" style="padding-top: 20px;">
                <label class="layui-form-label">图片附件</label>
                <html:imageAnnex type="saleOrder" update="true"
                                 uploadUrl="${baseUrl}sale/saleOrder/uploadImg.action"
                                 updateUrl="${baseUrl}sale/saleOrder/updateImage.action"/>
            </div>

            <hr>

            <span style="color: #aaaaaa;">制单人：</span><span id="makeUser"></span>
            <span style="color: #aaaaaa;padding-left: 20px;">制单时间：</span><span id="makeTime"></span>
        </form>
    </div>

    <script type="text/html" id="nameBar">
        {{#  if(d.packetId != undefined && d.packetId != null){ }}
            <div class="packetName">{{d.name}}</div>
        {{#  }else{ }}
            {{genGoodsName(d.name,d.norms)}}
        {{#  } }}
    </script>

    <script type="text/html" id="amountBar" >
        {{ getPrice(d.amount) }}
    </script>

    <script type="text/html" id="saleBar">
        <a class="saleDetail" saleId="{{d.saleId}}">{{d.saleNo}}</a>
    </script>
</div>

</body>
<html:packetListDialog/>
<html:loading/>
</html>